<template>
    <div class="babies">
        <van-nav-bar
        title="标题"
        right-text="🔎"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
        <section class="center">
            <aside class="top">
            </aside>
            <article class="list">
                <ul>
                    <li v-for="(item,i) in list" :key="i">
                        <span class="icon">{{item.id}}</span>
                        <dl>
                            <dt>
                                <img :src="item.uimg" alt="">
                            </dt>
                            <dd>
                                <h2>{{item.title}}</h2>
                                <h3>{{item.text1}}</h3>
                                <p>会员价:<span>￥{{item.price}}</span></p>
                                <p>{{item.text2}}</p>
                            </dd>
                        </dl>
                    </li>
                  
                    
                </ul>
            </article>
        </section>
    </div>
</template>

<script>
import Axios from 'axios';
    export default {
        data() {
            return {
                list:[]
            }
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            onClickRight(){
                this.$router.push('/')
            }
        },
        mounted() {
            let that  = this
            Axios({
                url:'http://www.babies.com/api'
            }).then(function(data){
                that.list = data.data.list
            })
        },
    }
</script>

<style scoped>
    .babies{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        height: 100%;
    }
    .center{
        flex: 1;
        color: #777676;
    }
    .van-nav-bar{
        background: #eaeaea;
        z-index: 9999;
    }
    .top{
        width: 100%;
        height: 30%;
        background: #eaeaea
    }
    .list{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding:130px 20px 0 20px;
        overflow: auto;
        box-sizing: border-box
    }
    .list ul{
        width: 100%;
        height: 100%;
         box-sizing: border-box
    }
    .list ul li{
        margin-top: 20px;
        background: #dfdfdf;
        border-radius: 10px;
         box-sizing: border-box;
         position: relative;
    }
    .list ul li .icon{
        position: absolute;
        top: -12px;
        left: -12px;
        width: 29px;
        height: 29px;
        border: 1px solid #aaa;
        border-radius: 50%;
        text-align: center;
        line-height: 29px
    }
     .list ul li dl{
         width: 100%;
         height: 100%;
         display: flex;
         padding: 20px 16px;
          box-sizing: border-box;
          font-size: 11px;
          align-items: center
     }
     .list ul li dl dt img{
         width: 110px;
         height: 110px;
     }
      .list ul li dl dd{
          padding: 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around
      }
      .list ul li dl dd p{
          font-size: 10px
      }
       .list ul li dl dd h3{
           font-size: 10px
       }
      .list ul li dl dd p:nth-of-type(1){
          background: #d9d9d9;
          border-radius: 8px;
          
      }
</style>